<template>
  <el-scrollbar height="calc(100vh - 180px)">
    <div class="cardBox">
      <div class="planing">计划</div>
      <el-card class="flex" v-show="state.tableData?.ButtonStatus !== 0">
        <img class="img" :src="state.tableData?.p?.PhotoURL" alt="" />
        <el-descriptions :column="1">
          <el-descriptions-item label="知识库：">
            {{ state.tableData?.p?.CropVarieties }}
          </el-descriptions-item>
          <el-descriptions-item
            label="计划名："
            label-class-name="PlanMainItem"
          >
            {{ state.tableData?.name }}
          </el-descriptions-item>
          <el-descriptions-item
            label="作物品种："
            label-class-name="PlanMainItem"
          >
            {{ state.tableData?.p?.CropVarieties }}
          </el-descriptions-item>
          <el-descriptions-item
            label="追溯码："
            label-class-name="PlanMainItem"
          >
            {{ state.tableData?.p?.TraceabilityCode }}
          </el-descriptions-item>
          <el-descriptions-item
            label="种植面积："
            label-class-name="PlanMainItem"
          >
            {{ state.tableData?.p?.PlantingArea }}平方米
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1">
          <el-descriptions-item label="种子：" label-class-name="PlanMainItem">
            {{ state.tableData?.p?.Seed }}
          </el-descriptions-item>
          <el-descriptions-item
            label="开始时间："
            label-class-name="PlanMainItem"
          >
            {{ formatDateTimes(state.tableData?.p?.PlantingStartTime) }}
          </el-descriptions-item>
          <el-descriptions-item
            label="结束时间："
            label-class-name="PlanMainItem"
          >
            {{ formatDateTimes(state.tableData?.p?.ActualEndTime) }}
          </el-descriptions-item>
          <el-descriptions-item
            label="负责人："
            label-class-name="PlanMainItem"
          >
            {{ state.tableData?.p?.PersonInCharge }}
          </el-descriptions-item>
          <el-descriptions-item label="技工：" label-class-name="PlanMainItem">
            {{ state.tableData?.p?.Mechanic }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <div v-show="state.tableData?.ButtonStatus == 0">
        <no-data></no-data>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { reactive, watch, computed } from "vue";
import store from "../../store/index";
import { formatDateTimes } from "../../utils/index";
import { $getCurrentPlantingPlan } from "../../utils/api";
import noData from "../../components/noData.vue";
const state = reactive({
  tableData: [],
});
const getCurrentPlantingPlan = async () => {
  const res = await $getCurrentPlantingPlan({
    facilities_id: store.state.facilities,
    pageIndex: 1,
    pageSize: 10,
  });
  state.tableData = res.results[0];
  console.log(state.tableData);
};
watch(
  computed(() => store.state.facilities),
  (e) => {
    store.state.facilities = e;
    getCurrentPlantingPlan();
  }
);
</script>

<style lang="scss" scoped>
.cardBox {
  .planing {
    padding: 10px 0;
    color: rgb(82, 82, 153);
    margin-left: 10px;
  }
  .planing::before {
    content: "";
    display: block;
    width: 2px;
    height: 20px;
    background-color: rgb(82, 82, 153);
    position: relative;
    top: 20px;
    left: -10px;
  }
}
:deep(.el-card__body) {
  display: flex;
}
</style>
